<template>
    <div class="wrap">
        <!-- <button class="jump" v-if="count > 2">{{count}}</button> -->
        <button class="jump" >{{count}}</button>
        <!-- <button class="jump" @click="handleJump" v-else>跳过</button> -->
        <header class="header">
            <div class="left"><img src="../../assets/images/smallRunPerson.png" alt=""></div>
            <div class="right">
                <img src="http://qnticao.laigl.com/vue/group1.png" alt="">
                <img src="http://qnticao.laigl.com/vue/header.png" alt="">
            </div>
        </header>
        <div class="main">
            <div class="title">
                <div class="top">2021年 “奔跑吧！少年”</div>
                <div class="middle">儿童青少年主题健身运动</div>
                <div class="bottom">暨全国体操青少年系列活动</div>
            </div>
            <div class="qrcode">
                <img src="../../assets/images/qrcode.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
    props:{
        count:{
            type:Number,
            default:()=>{
                return 5
            }
        }
    },
    setup (props,{emit}) {
        const handleJump = ()=>{
            emit("jump")
        }
        return {handleJump}
    }
}
</script>

<style lang="less" scoped>
.wrap{
    margin-top: -13.333vw;
    min-height: 100vh;
    width: 100vw;
    
    background-color: #fdd541;
    // overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding-top: 12vw;
    .jump{
        font-size: 4.267vw;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 5.333vw;
        width: 6.667vw;
        height: 6.667vw;
        line-height: 6.667vw;
        text-align: center;
        top: 2.667vw;
        border: 1px solid #ccc;
        background-color: #000;
        color: #fff;
        border-radius: 50%;
        -webkit-appearance: none;
    }
    .header{
        margin: 0 auto;
        width: 86.4vw;
        height: 13.333vw;
        display: flex;
        justify-content: space-between;
        vertical-align: middle;
        .left{
            img{
                width: 32.267vw;
                height: 13.333vw;
            }
        }
        .right{
            display: flex;
            img:nth-child(1){
               width: 9.333vw;
               height: 13.333vw;
               margin-right: 3.2vw;
            }
            img:nth-child(2){
               width: 10.667vw;
            }
        }
    }
    .main{
        position: relative;
        width: 100vw;
        height: 125.067vw;
        background-image: url("../../assets/images/runPerson.png");
        background-size:100%;
        background-repeat: no-repeat;
        // background-position:-13.333vw 0;
        padding-top: 8vw;
        .title{
            // margin-top: 8vw;
            margin-left: 7.2vw;
            color: #00295f;
            .top{
                font-size: 3.467vw;
                font-weight: 600;
                margin-bottom: 4vw;
            }.middle{
                font-size: 4.8vw;
                font-weight: 550;
                 margin-bottom: 4vw;
            }.bottom{
                font-size: 3.467vw;
                 margin-bottom: 4vw;
            }
        }
        .qrcode{
            position: absolute;
            right: 9.333vw;
            bottom: 6.667vw;
            img{
                width: 23.467vw;
                vertical-align: middle;
            }
        }
    }
}
</style>